$btn-prefix-cls: "#{$css-prefix}btn";
.#{$btn-prefix-cls} {
  @include btn();
  @include btn-default();
  &-long{
    width: 100%;
  }
  .iconfont{
    font-size: $font-size-small;
  }

  & > .h-icon + span, & > span + .h-icon{
    margin-left: 4px;
    font-size: $font-size-small;
  }

  &-primary {
    @include btn-primary();

    .#{$btn-prefix-cls}-group:not(.#{$btn-prefix-cls}-group-vertical) &:not(:first-child):not(:last-child) {
      border-right-color: $btn-group-border;
      border-left-color: $btn-group-border;
    }

    .#{$btn-prefix-cls}-group:not(.#{$btn-prefix-cls}-group-vertical) &:first-child {
      &:not(:last-child) {
        border-right-color: $btn-group-border;
        &[disabled] {
          border-right-color: $btn-default-border;
        }
      }
    }

    .#{$btn-prefix-cls}-group:not(.#{$btn-prefix-cls}-group-vertical) &:last-child:not(:first-child),
    .#{$btn-prefix-cls}-group:not(.#{$btn-prefix-cls}-group-vertical) & + .#{$btn-prefix-cls} {
      border-left-color: $btn-group-border;
      &[disabled] {
        border-left-color: $btn-default-border;
      }
    }

    .#{$btn-prefix-cls}-group-vertical &:not(:first-child):not(:last-child) {
      border-top-color: $btn-group-border;
      border-bottom-color: $btn-group-border;
    }

    .#{$btn-prefix-cls}-group-vertical &:first-child {
      &:not(:last-child) {
        border-bottom-color: $btn-group-border;
        &[disabled] {
          border-top-color: $btn-default-border;
        }
      }
    }

    .#{$btn-prefix-cls}-group-vertical &:last-child:not(:first-child),
    .#{$btn-prefix-cls}-group-vertical & + .#{$btn-prefix-cls} {
      border-top-color: $btn-group-border;
      &[disabled] {
        border-bottom-color: $btn-default-border;
      }
    }
  }

  &-ghost {
    @include btn-ghost;
  }

  &-dashed{
    @include btn-dashed;
  }

  &-text{
    @include btn-text;
  }

  /*&-danger{
    @include btn-danger;
  }*/

  &-danger {
    @include button-custom($btn-danger-color, $btn-danger-bg, $btn-danger-border);
    border-style: solid;
    border-radius:$btn-border-radius;
    color: $btn-danger-color;
    background-color:$btn-danger-bg;
    border-color: $btn-danger-border;
    
    &:hover {
      color: $btn-danger-hover-color;
      background-color: $btn-danger-hover-bgcolor;
      border-color: $btn-danger-hover-border-color;
    }
    &:active,
    &.active {
      color: $btn-danger-press-color;
      background-color: $btn-danger-press-bgcolor;
      border-color:$btn-danger-press-border-color;
    }
  }
  /*&-success {
    @include btn-color($success-color);
  }*/

  &-success {
    @include button-custom($btn-success-color, $success-color, $success-color);
    border-style: solid;
    border-radius:$btn-border-radius;
    color: $btn-success-color;
    background-color: $btn-success-bg;
    border-color: $btn-success-border;
    
    &:hover {
      color: $btn-success-hover-color;
      background-color: $btn-success-hover-bgcolor;
      border-color: $btn-success-hover-border-color;
    }
    &:active,
    &.active {
      color: $btn-success-press-color;
      background-color: $btn-success-press-bgcolor;
      border-color:$btn-success-press-border-color;
    }
  }

  &-warning {
    @include button-custom($btn-warning-color, $warning-color, $warning-color);
    border-style: solid;
    border-radius:$btn-border-radius;
    color: $btn-warning-color;
    background-color: $btn-warning-bg;
    border-color: $btn-warning-border;
    
    &:hover {
      color: $btn-warning-hover-color;
      background-color: $btn-warning-hover-bgcolor;
      border-color: $btn-warning-hover-border-color;
    }
    &:active,
    &.active {
      color: $btn-warning-press-color;
      background-color: $btn-warning-press-bgcolor;
      border-color:$btn-warning-press-border-color;
    }
  }
  /*&-warning {
    @include btn-color($warning-color);
  }*/

  /*&-error {
    @include btn-color($error-color);
  }*/

  &-error {
    @include button-custom($btn-error-color, $error-color, $error-color);
    border-style: solid;
    border-radius:$btn-border-radius;
    color:$btn-error-color;
    background-color: $btn-error-bg;
    border-color: $btn-error-border;
    
    &:hover {
      color: $btn-error-hover-color;
      background-color: $btn-error-hover-bgcolor;
      border-color: $btn-error-hover-border-color;
    }
    &:active,
    &.active {
      color: $btn-error-press-color;
      background-color: $btn-error-press-bgcolor;
      border-color:$btn-error-press-border-color;
    }
  }

  /*&-info {
    @include btn-color($info-color);
  }*/
  &-info {
    @include button-custom($btn-primary-color, $info-color, $info-color);
    border-style: solid;
    border-radius:$btn-border-radius;
    color: $btn-info-color;
    background-color: $btn-info-bg;
    border-color: $btn-info-border;
    
    &:hover {
      color: $btn-info-hover-color;
      background-color: $btn-info-hover-bgcolor;
      border-color: $btn-info-hover-border-color;
    }
    &:active,
    &.active {
      color: $btn-info-press-color;
      background-color: $btn-info-press-bgcolor;
      border-color:$btn-info-press-border-color;
    }
  }

  &-circle,
  &-circle-outline {
    @include btn-circle($btn-prefix-cls);
  }

  &:before {
      position: absolute;
      top: $btn-before-top;
      left: $btn-before-left;
      bottom: $btn-before-bottom;
      right: $btn-before-right;
      background: $btn-before-background;
      opacity: 0.35;
      content: '';
      border-radius: inherit;
      z-index: 1;
      transition: opacity $transition-time;
      pointer-events: none;
      display: none;
  }

  &-loading {
    pointer-events: none;
    position: relative;
    // .icon-loading:before{
    //   display: inline-block;
    //   animation: lRotate 1s infinite linear;
    // }
    &:before {
      display: block;
    }
  }

  &-group {
    @include btn-group($btn-prefix-cls);
  }

  &-group-vertical {
    @include btn-group-vertical($btn-prefix-cls);
  }

  &-transparent {
    @include btn-transparent;
  }
}
